要从数据库中导入字体名称和字体URL，你可以使用Angular的HttpClient模块与后端进行通信，并在组件中处理返回的数据。下面是一个示例解决方案：

1. 在你的Angular项目中创建一个字体服务（font.service.ts）：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class FontService {
  private baseUrl = 'http://your-api-url'; // 替换为你的后端API URL

  constructor(private http: HttpClient) { }

  getFonts(): Observable {
    return this.http.get(this.baseUrl + '/fonts');
  }
}

2. 在你的组件中使用字体服务获取字体数据（font.component.ts）：

import { Component, OnInit } from '@angular/core';
import { FontService } from 'path/to/font.service';

@Component({
  selector: 'app-font',
  templateUrl: './font.component.html',
  styleUrls: ['./font.component.css']
})
export class FontComponent implements OnInit {
  fonts: any[] = [];

  constructor(private fontService: FontService) { }

  ngOnInit(): void {
    this.fontService.getFonts().subscribe(data => {
      this.fonts = data;
    });
  }
}

3. 在你的组件模板中显示字体数据（font.component.html）：

  
{{ font.name }}
  

这样，当组件初始化时，它会调用字体服务的getFonts方法来获取字体数据，并将数据赋值给组件的fonts属性。然后，在组件的模板中使用*ngFor指令遍历字体数组，并显示字体名称和链接到字体URL的样式表链接。

请注意，上述示例假设你有一个名为/fonts的API端点，它返回一个包含字体名称和字体URL的数组。你需要根据你的后端API进行相应的更改。