Additional fonts responsive size wordpress

bob52
26 Posts
bob52 posted this 18 January 2017

Hi there.

On a website i build i got the fonts for the header as external fonts defined in the css.
This works fine. The only thing i would like to do is to re-define the fontsize per mobile view.

now i got this in my additional css:
@font-face {
font-family: 'seawebfont';
src: url('seawebfont.eot');
src: url('seawebfont.eot?#iefix') format('embedded-opentype'),
url('seawebfont.woff2') format('woff2'),
url('seawebfont.woff') format('woff'),
url('seawebfont.ttf') format('truetype'),
url('seawebfont.svg#searegular') format('svg');
font-weight: normal;
font-style: normal;
}

h1 {
color: #000000;
font-family: 'seawebfont';
font-size:38px;
}

h2 {
color: #000000;
font-family: 'seawebfont';
font-size:38px;
}
h3 {
color: #000000;
font-family: 'seawebfont';
font-size:38px;
}

Now i know that with google fonts or the helvetica fonts in themler you have to go to the responsive view en then you can re-scale them. That is not the case with the additional fonts.
How does it work then?

Thank you

Hi there. On a website i build i got the fonts for the header as external fonts defined in the css. This works fine. The only thing i would like to do is to re-define the fontsize per mobile view. now i got this in my additional css: @font-face { font-family: 'seawebfont'; src: url('seawebfont.eot'); src: url('seawebfont.eot?#iefix') format('embedded-opentype'), url('seawebfont.woff2') format('woff2'), url('seawebfont.woff') format('woff'), url('seawebfont.ttf') format('truetype'), url('seawebfont.svg#searegular') format('svg'); font-weight: normal; font-style: normal; } h1 { color: #000000; font-family: 'seawebfont'; font-size:38px; } h2 { color: #000000; font-family: 'seawebfont'; font-size:38px; } h3 { color: #000000; font-family: 'seawebfont'; font-size:38px; } Now i know that with google fonts or the helvetica fonts in themler you have to go to the responsive view en then you can re-scale them. That is not the case with the additional fonts. How does it work then? Thank you
font-size wordpress custom-fonts
Vote to pay developers attention to this features or issue.
7 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 18 January 2017

Hi,

You will need to use custom code then. For that use @media option. Like this:

@media (max-width:767px) {
h1 {
font-family: 'seawebfont';
font-size:18px;
}
}

That will define the font size for the phones.

Sincerely,
Hella

Hi, You will need to use custom code then. For that use `@media` option. Like this: @media (max-width:767px) { h1 { font-family: 'seawebfont'; font-size:18px; } } That will define the font size for the phones. Sincerely, Hella
bob52
26 Posts
bob52 posted this 18 January 2017

Hi,

You will need to use custom code then. For that use @media option. Like this:

@media (max-width:767px) {
h1 {
font-family: 'seawebfont';
font-size:18px;
}
}

That will define the font size for the phones.

Sincerely,
Hella

Hi Hella what a fast response! super!!
whre can i find the css predifined sizes for the different responsive views?

> Hi, > > You will need to use custom code then. For that use `@media` option. Like this: > > @media (max-width:767px) { > h1 { > font-family: 'seawebfont'; > font-size:18px; > } > } > > That will define the font size for the phones. > > Sincerely, > Hella Hi Hella what a fast response! super!! whre can i find the css predifined sizes for the different responsive views?
Support Team
Support Team posted this 18 January 2017

Hi,

Sorry, I'm not sure I understand what predefined sizes you are talking about.

Sincerely,
Hella

Hi, Sorry, I'm not sure I understand what predefined sizes you are talking about. Sincerely, Hella
bob52
26 Posts
bob52 posted this 18 January 2017

so you wrote @media (max-width:767px) is for mobile.
What are the other sizes for laptop and tablet view?

so you wrote @media (max-width:767px) is for mobile. What are the other sizes for laptop and tablet view?
Support Team
Support Team posted this 18 January 2017

Hi,

You can find the media query width under the Home >> Settings >> Theme Layout. For all the devices acept the phone use the max-width option with the value listed for it under the device name (not the one in the white input box). So for the tablets will be:

@media (max-width: 991px)
{
h1 { ... }
}

Sincerely,
Hella

Hi, You can find the media query width under the Home >> Settings >> Theme Layout. For all the devices acept the phone use the `max-width` option with the value listed for it under the device name (not the one in the white input box). So for the tablets will be: @media (max-width: 991px) { h1 { ... } } Sincerely, Hella
bob52
26 Posts
bob52 posted this 18 January 2017

Thnx Hella Great help!!

Thnx Hella Great help!!
Support Team
Support Team posted this 18 January 2017

You are welcome. Feel free to contact us again.

Sincerely,
Hella

You are welcome. Feel free to contact us again. Sincerely, Hella
You must log in or register to leave comments